<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>车辆类型管理</title>
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/a3common.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/login.css">
        <link rel="stylesheet" href="/css/font_43459_lbtux0zjkr6yldi.css">
        <script src="/js/vue.js"></script>
        <script src="/js/axios-0.18.0.js"></script>
        <link rel="stylesheet" href="/plugins/elementui/index.css">
        <script src="/plugins/elementui/index.js"></script>
        <!--导入axios二次封装的工具-->
        <script src="/js/request.js"></script>
    </head>
    <body>
        <div id="app">
            <p></p>
            <!--头部条件查询表单-->
            <el-form :inline="true" :model="queryCarTypeVo" align="center" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" style="background-color: red; width: 100px" icon="el-icon-delete" @click="deleteCarTypeAll">全部删除</el-button>
                </el-form-item>
                <el-form-item label="车辆类型">
                    <el-input v-model="queryCarTypeVo.typeName" placeholder="车辆类型"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryPageCarType">查询</el-button>
                    <el-button  type="primary" @click="showAddCarTypeDialog">添加车辆类型</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    ref="multipleTable"
                    :data="carTypes"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <!--多选框-->
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="车辆类型"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="company"
                        label="所属公司"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showQueryOneDialog(scope.row.id)">查看</el-button>
                        <el-button
                                size="mini"
                                @click="showUpdateDialog(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteCarTypeById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--用于添加或者修改的dialog框-->
            <el-dialog title="添加或者修改" :visible.sync="dialogFormVisible">
                <el-form :model="carType">
                    <el-form-item label="车辆类型" label-width="120px">
                        <el-input v-model="carType.typeName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属公司" label-width="120px">
                        <el-input v-model="carType.company" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" label-width="120px">
                        <el-input v-model="carType.remarks" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="closeUpdateCarTypeDialog">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateCarType">确 定</el-button>
            </el-dialog>
            <!--用于显示详细信息的dialog框-->
            <el-dialog title="车辆类型详细信息" :visible.sync="queryOneDialogVisible">
                <el-table :data="[carType]">
                    <el-table-column property="typeName" label="车辆类型"></el-table-column>
                    <el-table-column property="company" label="所属公司"></el-table-column>
                    <el-table-column property="remarks" label="备注"></el-table-column>
                </el-table>
            </el-dialog>
            <!--分页插件-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="text-align: center">
            </el-pagination>
        </div>
    </body>
</html>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                queryOneDialogVisible: false,
                /*用于控制dialog框要不要显示*/
                dialogFormVisible: false,
                /*条件查询数据模型*/
                queryCarTypeVo: {},
                /*用于接收分页查询出来的车辆类型集合*/
                carTypes: [],
                /*用于接收批量删除选中的行数据*/
                isSelectedRows: [],
                /*定义一个专门用于存放需要删除的行的id的集合*/
                isSelectedRowIds: [],
                /*用于添加、修改、查看单个车辆类型的数据模型*/
                carType: {id: "-1"},
                /*当前的页面*/
                pageNum: 1,
                /*当前的页面大小*/
                pageSize: 2,
                /*总记录数*/
                total: 0
            }
        },
        methods:{
            /*批量删除*/
            deleteCarTypeAll() {
                /**
                 *  先把isSelectedRows里面取出需要删除的行的id，设置到isSelectedRowIds数组里面，
                 *  然后把isSelectedRowIds发送到后台，完成删除
                 */
                /*循环获取数组里面的每行元素*/
                /*for(i = 0; i < this.isSelectedRows.length; i++) {
                    /!*先判断取出来的对象是否是null*!/
                    if(this.isSelectedRows[i]) {
                        this.isSelectedRowIds.push(this.isSelectedRows[i].id);
                        //console.log("id", this.isSelectedRows[i].id);
                    }
                }*/
                this.isSelectedRows.forEach(row => {
                    /*取出该行的id，push到isSelectedRowIds数组中*/
                    this.isSelectedRowIds.push(row.id);
                });
                console.log("需要删除的ids", this.isSelectedRowIds);
                //发送批量删除的请求
                this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //确定删除
                    request({
                        method: 'delete',
                        url: '/carType/all',
                        data: this.isSelectedRowIds
                    }).then(data => {
                        /*提示信息*/
                        this.$message({
                            type: 'info',
                            message: data.data.message
                        });
                        //重新查询
                        this.queryPageCarType();
                    }).catch(data => {
                        console.log(data)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*多条件分页查询*/
            queryPageCarType() {
                request({
                    method: 'post',
                    url: '/carType/page/' + this.pageNum + '/' + this.pageSize,
                    data: this.queryCarTypeVo
                }).then(data => {
                    this.carTypes = data.data.data.result;
                    console.log('当前页面的数据：', this.carTypes);
                    this.total = data.data.data.totals;
                }).catch(data => {
                    console.log('请求错误：', data)
                })
            },
            /*弹出添加车辆类型的dialog框*/
            showAddCarTypeDialog() {

            },
            handleSelectionChange(val) {
                //val是一个集合，是当前选中的所有行的数据
                console.log('table select 事件', val)
                this.isSelectedRows = val;
            },
            /*显示查询该行数据详情的数据方法*/
            showQueryOneDialog(id) {
                this.queryCarTypeById(id);
                this.queryOneDialogVisible = true;
            },
            /*显示编辑dialog框的方法*/
            showUpdateDialog(index, row) {
                /*用深拷贝把row里面的数据复制给用于dialog里面数据显示数据模型*/
                /*因为我们查询列表的时候只查询两个字段，修改回显的时候需要修改其他字段，所以在根据id查询一遍*/
                this.queryCarTypeById(row.id);
                this.dialogFormVisible = true;
            },
            /*根据id单个删除的方法*/
            deleteCarTypeById(id) {
                //单个删除
                this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //确定删除
                    request({
                        method: 'delete',
                        url: '/carType/' + id
                    }).then(data => {
                        /*提示信息*/
                        this.$message({
                            type: 'info',
                            message: data.data.message
                        });
                        //重新查询
                        this.queryPageCarType();
                    }).catch(data => {
                        console.log(data)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*关闭添加或者修改的dialog框*/
            closeUpdateCarTypeDialog() {
                this.carType = {id: '-1'};
                this.dialogFormVisible = false;
            },
            /*添加或者修改的方法*/
            addOrUpdateCarType() {
                //首先判断当前的操作是修改还是添加
                if(this.carType.id != '-1') {
                    //说明是修改
                    request({
                        method: 'put',
                        url: '/carType',
                        data: this.carType
                    }).then(data => {
                        this.$message({
                            type: 'success',
                            message: data.data.message
                        })
                    })
                } else {
                    //说明是添加操作
                }
                /*关闭dialog框*/
                this.dialogFormVisible = false;
                /*重新查一遍*/
                this.queryPageCarType();
            },
            /*页面大小发生改变触发该方法*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.queryPageCarType();
            },
            /*当前的页码发生改变触发该方法*/
            handleCurrentChange(val) {
                this.pageNum = val;
                this.queryPageCarType();
            },
            /*根据id查询车辆类型*/
            queryCarTypeById(id) {
                request({
                    method: 'get',
                    url: '/carType/' + id
                }).then(data => {
                    this.carType = data.data.data;
                })
            }

        },
        created(){
            this.queryPageCarType();
        }
    });
</script>